<!--表单查看页面-->
<template>
  <div class="form-viewer">
    <el-form
      :ref="formConf.formModel"
      :size="formConf.size"
      :model="form"
      :label-position="formConf.labelPosition"
      :disabled="formConf.disabled"
    >
      <template v-for="(element, index) in itemList">
        <preview-row-item v-if="element.compType === 'row'" :key="'row-' + index" :model="element">
          <el-col v-for="column in element.columns" :key="column.index" :span="column.span">
            <form-view-item
              v-for="item in column.list"
              :key="item.id"
              v-model="form[item.id]"
              :model="item"
            />
          </el-col>
        </preview-row-item>
        <fancy-dynamic-view-table
          v-else-if="element.compType === 'dynamicTable'"
          :key="'dynamic-' + index"
          :ref="element.id"
          :data="form[element.id]"
          :conf="element"
        >
          <template #item="{ rowScope, item }">
            <fancy-dynamic-table-view-item
              :ref="item.id + rowScope.$index"
              :key="'tableIndex-' + rowScope.$index"
              v-model="rowScope.row[item.id]"
              :model="item"
              :parent="element"
              :index="rowScope.$index"
            />
          </template>
        </fancy-dynamic-view-table>
        <fancy-edit-table
          v-else-if="element.compType === 'table'"
          :layout-array="element.layoutArray"
          :td-style="element.tdStyle"
          :width="element.width"
          :height="element.height"
        >
          <template #default="{ td }">
            <form-view-item
              v-for="item in td.columns"
              :key="item.id"
              v-model="form[item.id]"
              :model="item"
            />
          </template>
        </fancy-edit-table>
        <!--item-->
        <el-col v-else :key="index" class="drag-col-wrapper" :span="element.span">
          <form-view-item v-model="form[element.id]" :model="element" />
        </el-col>
      </template>
    </el-form>
  </div>
</template>

<script>
  import formViewItem from './formViewItem.jsx';
  import previewRowItem from './previewRowItem.vue';
  import fancyDynamicViewTable from './dynamic/fancyDynamicViewTable.vue';
  import fancyDynamicTableViewItem from './dynamic/fancyDynamicTableViewItem.jsx';
  import fancyEditTable from './table/fancyEditTable.vue';
  export default {
    name: 'FormViewer',
    components: {
      formViewItem,
      previewRowItem,
      fancyDynamicViewTable,
      fancyDynamicTableViewItem,
      fancyEditTable,
    },
    props: {
      modelValue: {
        type: String,
        default: '',
      },
      buildData: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        disabled: true,
      };
    },
    computed: {
      itemList() {
        if (this.buildData !== '') {
          const buildData = JSON.parse(this.buildData);
          return buildData.list;
        } else {
          return [];
        }
      },
      form() {
        //转换成json的值
        if (this.modelValue !== '') {
          const value = JSON.parse(this.modelValue);
          return value;
        } else {
          return {};
        }
      },
      formConf() {
        if (this.buildData !== '') {
          const buildData = JSON.parse(this.buildData);
          buildData.config.disabled = this.disabled;
          return buildData.config;
        } else {
          return {};
        }
      },
    },
    mounted() {
      this.$nextTick(() => {});
    },
  };
</script>

<style scoped>
  .preview-board {
    border: 1px dashed #ccc;
  }

  .form-viewer {
    padding: 20px;
    border: 1px solid #dcdfe6;
  }

  .el-form-item {
    margin-right: 10px;
    margin-left: 10px;
  }
</style>
